<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>cbnu jquery</title>
		<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
		<script src="resources/js/jquery.effects.core.js"></script>
		 <style type="text/css">
    body {
        padding-top: 200px;
        padding-bottom: 20px;
      }
  
    ul{list-style: none;}
  
    </style>
		<style>
            *{
                margin:0;
                padding:0;}
            .title{
				font-family:"돋움", Arial, Dotum,Helvetica,AppleGothic,Sans-serif;
				font-size: 40px;
				font-weight: bold; 
                position:absolute;
                top:70px;
                left:30px;}
			.title span{
				font-size: 20px}
			#menu{
				font-family: "Trebuchet MS", sans-serif;
				font-size: 24px;
				font-style: normal;
				font-weight: bold;
				letter-spacing: 1.4px;}
			#menu .item{
				position:absolute;}		
			.cbnu1{
				top:350px;
				left:80px;}		
			.cbnu2{
			   top:330px;
			   left:280px;}
			.cbnu3{
			   top:250px;
			   left:460px;}
			.cbnu4{
			   top:90px;
			   left:570px;}
			.item img.circle{
				position:absolute;
				top:100px;
				left:100px;
				width:50px;
				height:50px;
				opacity:0.1;}
			a.icon{
				position:absolute;
				top:0px;
				left:0px;
				width:50px;
				height:50px;
				background: #ccc; 
				border-radius: 25px;}
			.cbnu1 a.icon{
				background:#FFFF00;}
			.cbnu2 a.icon{
				background:#E9DE16;}
			.cbnu3 a.icon{
				background:#FF9900;}
			.cbnu4 a.icon{
				background:#FF6600;}
			.item h2{    
				color:#555;
				font-size:20px;
				position:absolute;
				top:10px;
				left:40px;
				text-shadow:1px 1px 1px #fff;
				text-transform:uppercase;}
			.item ul{
				list-style:none;
				position:absolute;
				top:50px;
				left:50px;
				display:none;}
			.item ul li a{
				font-size:15px;
				text-decoration:none; 
				color:#555;
				text-shadow:1px 1px 1px #fff;
				padding:2px;
				float:left;
				clear:both;}
			.item ul li a:hover{
				color:#fff;
				text-shadow:1px 1px 1px #555;}
			.item h2.active{
				color:#fff;
				text-shadow:1px 0px 1px #555;}



		</style>
	</head>
	<body>
		<script type="text/javascript" src="resources/js/jquery.js"></script>
		<script type="text/javascript" src="resources/js/jquery.innerfade.js"></script>
		<script type="text/javascript">
		
		$(document).ready(
				function(){
						$('ul#portfolio').innerfade({
						speed: 1000,
						timeout: 5000,
						type: 'sequence',
						containerheight: '220px'
					});
			});
  	</script>
  	<ul id="portfolio">
	<li>
		<img src="resources/images/cbnu1.jpg" width="200px" height="100px"/>
			
	</li>
		<li>
		<img src="resources/images/cbnu2.jpg" width="200px" height="100px"/>
		
	</li>
	<li>
		<img src="resources/images/cbnu5.jpg"width="200px" height="100px"/>
		
	</li>
	<li>
		<img src="resources/images/cbnu6.jpg" width="200px" height="100px"/>
		
	</li>
	
	</ul>
			<div class="title">cbnu충북대학교<span>WITH JQUERY</span><P>버블형태 메뉴제작</P></div>

            <div id="menu">
                <div class="item cbnu1">
                    <img src="resources/images/bubble.png" alt="" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>cbnu1</h2>
                    <ul>
                        <li><a href="template">탬플릿</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                    </ul>
                </div>

                <div class="item cbnu2">
                    <img src="resources/images/bubble.png" alt="" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>cbnu2</h2>
                    <ul>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                    </ul>
                </div>

                <div class="item cbnu3">
                    <img src="resources/images/bubble.png" alt="" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>cbnu3</h2>
                    <ul>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                    </ul>
                </div>

                <div class="item cbnu4">
                    <img src="resources/images/bubble.png" alt="" class="circle"/>
                    <a href="#" class="icon"></a>
                    <h2>cbnu4</h2>
                    <ul>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">menu</a></li>
                    </ul>
                </div>                
            </div>

		<script type="text/javascript">
			$(function(){

 
               $('#menu > div').hover(
                function () {
                    var $el = $(this);
					$el.find('.circle').stop().animate({
                        'width'     :'199px',
                        'height'    :'199px',
                        'opacity'   :'0.8',
						'top'       :'-25px',
                        'left'      :'-25px'
                    },500,'easeOutBack',function(){
                        $(this).parent().find('ul').fadeIn(400);	
                    });
					$el.find('h2').addClass('active');
                },
                function () {
                    var $el = $(this);
					$el.find('ul').fadeOut(500);
					$el.find('.circle').stop().animate({
                        'width'     :'50px',
                        'height'    :'50px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.1'
                    },4000,'easeOutBack');
					$el.find('h2').removeClass('active');
                });


			});
		</script>
     </body>
</html>